<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="SwipeoutList 滑动列表"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="在 swipe-list 中使用">
      <hips-swipeout-list
        :list="list"
        :left-buttons="leftButtons"
        :right-buttons="rightButtons"
        class="list"
        @swipeout:button-click="handleButtonClick"
      >
        <hips-cell
          slot="content"
          slot-scope="{ item, index }"
          :title="item.title"
          :value="item.value"
          @click="clickListContent(index)"
        />
      </hips-swipeout-list>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { SwipeoutList, Cell } from '@hips/vue-ui';

export default {
  components: {
    [SwipeoutList.name]: SwipeoutList,
    [Cell.name]: Cell,
  },
  mixins: [ BasicView ],
  data() {
    return {
      list: [],
      leftButtons: [],
      rightButtons: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      for (let i = 0; i < 10; i++) {
        let t = {
          title: `title_${i}`,
          value: `value_${i}`,
        };
        vm.list.push(t);
      }
      vm.leftButtons = [
        {
          width: '80',
          bgColor: 'blue',
          fontColor: '#fff',
          text: '我的',
          onClick: ({ index }) => {
            vm.$hips.toast(`click me at index = ${index}`);
          },
        },
      ];

      vm.rightButtons = [
        {
          width: '80',
          bgColor: 'blue',
          fontColor: '#fff',
          text: '删除',
          onClick: ({ index, itemInfo }) => {
            vm.$hips.toast(
              `click share at index = ${index}, currentItemInfo =${JSON.stringify(
                itemInfo,
              )}`,
            );
          },
        },
        {
          width: '60',
          bgColor: 'red',
          fontColor: '#fff',
          text: '分享',
          onClick: (result) => {
            vm.$hips.toast(`click delete at index = ${result.index}`);
          },
        },
      ];
    });
  },
  methods: {
    handleButtonClick(itemIndex, side, btnIndex) {
      this.$hips.toast(
        `handleButtonClick itemIndex = ${itemIndex} side = ${side} btnIndex = ${btnIndex}`,
      );
    },

    clickListContent(index) {
      this.$hips.toast(`clickListContent index = ${index}`);
    },
  },
};
</script>

<style>
.list {
  user-select: none;
}
</style>
